<template>
    <div class="box">
        <div class="panel">
            <div class="login_title">用户登录</div>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="ruleFormClass"
                size="large"
                status-icon
            >
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="ruleForm.password" show-password />
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" :style="{ width: '100%' }" @click="login"
                        >登录</el-button
                    >
                    <a @click="router.push('/register')" style="text-align: center; width: 100%; cursor: pointer;">去注册</a>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { type FormInstance, type FormRules } from 'element-plus'
import { login as logIn, getUserInfo } from '../api/index'
import Message from '../utils/Message'
import { useUserInfo } from '../store'
const userInfo = useUserInfo()

interface RuleForm {
    name: string
    password: string
}

const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    password: ''
})
const rules = reactive<FormRules<RuleForm>>({
    name: [
        {
            required: true,
            message: '请输入用户名'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ]
})

// 用户登陆
const login = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        try {
            const res = await logIn(ruleForm)
            if (res.status !== 200) return Message.error('登录失败')
            localStorage.setItem('vehicle_web_token', res.data.token)
            // 用拿到的token去获取用户信息
            const result = await getUserInfo()
            if (result.status !== 200) return Message.error('获取用户信息失败')
            localStorage.setItem('vehicle_web_userInfo', JSON.stringify(result.data.userInfo || {}))
            userInfo.getUserMessage()
            Message.success('登陆成功，即将跳转')
            setTimeout(() => {
                router.push('/')
            }, 1500)
        } catch (e) {
            console.log('🚀 ~ This is a result of console.log ~ ✨: ', e)
        }
    })
}
</script>

<style lang="scss" scoped>
.box {
    height: calc(100vh);
    width: 100%;
    background-image: url('../../public/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    .panel {
        width: 400px;
        background-color: rgba(255, 255, 255, 0.8);
        float: right;
        margin-top: 200px;
        margin-right: 255px;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 2px 2px 10px #ddd;
        .login_title {
            font-weight: 800;
            margin-bottom: 20px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 20px;
        }
    }
}
</style>
